<template>
    <div class="index">
      <div class="index-info clear">
        <Row :gutter="16">
          <Col span="6">
            <Card :bordered="false">
              <p slot="title">
                总收入
                <b class="info-ba" style="background-color: #1C84C6;">全年</b>
              </p>
              <h1>￥40 886,200 </h1>
            </Card>
          </Col>
          <Col span="6">
            <Card :bordered="false">
              <p slot="title">
                总支出
                <b class="info-ba" style="background-color: #23C6C8;">全年</b>
              </p>
              <h1>￥10 826,130 </h1>
            </Card>
          </Col>
          <Col span="6">
            <Card :bordered="false">
              <p slot="title">
                总订单
                <b class="info-ba" style="background-color: #1AB394;">全年</b>
              </p>
              <h1>102单</h1>
            </Card>
          </Col>
          <Col span="6">
            <Card :bordered="false">
              <p slot="title">
                待收款订单
                <b class="info-ba" style="background-color: #ED5565;">全年</b>
              </p>
              <h1>41单</h1>
            </Card>
          </Col>
        </Row>
      </div>
      <div class="index-content">
        <Row :gutter="16">
          <Col span="6" v-for="(value,key) in menus" :key="key">
            <Card :bordered="false">
             <div slot="title">
               <img :src="'../../static/images/'+value.icon" width="30%">
                <h3>{{value.menuName}}</h3>
             </div>
              <p style="width: 80%;margin-left: 10%">{{value.menuDesc}}<br/><br/></p>
              <div class="content-zzc" @click="toJump(value.name)"></div>
            </Card>
          </Col>
        </Row>
      </div>
    </div>
</template>

<script>
  import {mapGetters} from 'vuex';
    export default {
        name: "index",
        data() {
            return {}
        },
        methods: {
          logOut(){
            localStorage.clear();
            this.$router.push('/');
          },
          jump(e){
            this.$router.push(e);
          },
          toJump(e){
            this.$router.push(e);
            console.log(e);
          }
        },
        computed: {
          ...mapGetters(['menus'])
        },
        props: {},
        components: {},
        mounted() {
        },
        created() {
        }
    }
</script>

<style lang="css" scoped>
</style>
